<template>
  <div class="home-wrap global-wrap">
    <p class="global-title">- 登陆 -</p>
    <div class="form-wrap">
      <van-form @submit="onSubmit" class="form">
        <van-field
          class="field"
          v-model="formData.phone"
          name="phone"
          label="手机号码"
          maxlength="11"
          :rules="[{ required: true, message: '请填写手机号码' }]"
        />
        <van-row>
          <van-col span="16">
            <van-field
              class="field"
              v-model="formData.verifyCode"
              name="verifyCode"
              label="验证码"
              :rules="[{ required: true, message: '请填写验证码' }]"
            />
          </van-col>
          <van-col span="8" style="padding-top: 8px; padding-left: 10px">
            <van-button
              block
              size="small"
              plain type="info"
              :disabled="!formData.phone || validateName.indexOf('s') != -1"
              style="border-radius: 5px"
              @click="getSmsCode"
              native-type="button"
            >
              {{validateName}}
            </van-button>
          </van-col>
        </van-row>
        
        <div class="button-wrap">
          <van-button round block type="info" native-type="submit">
            登&nbsp;&nbsp;&nbsp;&nbsp;录
          </van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import Cookies from 'js-cookie'
import loading from "@/globalComponents/Loading/loading";
import { Field, Form, Button, Dialog, Toast, Row, Col } from "vant";
import { callBack, saveInfo, upload } from "@/api/index";
import FormInput from "@/components/form-input";
import FormSelect from "@/components/form-select";
import FormDatePicker from "@/components/form-date-picker";
import { getAreaTree, getSmsCode, smsLogin } from "@/api";
// import { delete } from 'vue/types/umd';

class InitData {
  phone;
  verifyCode;
}

export default {
  name: "Login",
  components: {
    loading,
    [Field.name]: Field,
    [Form.name]: Form,
    [Button.name]: Button,
    [Toast.name]: Toast,
    [Dialog.name]: Dialog,
    [Row.name]: Row,
    [Col.name]: Col,
    FormInput,
    FormSelect,
    FormDatePicker,
  },
  data() {
    return {
      formData: new InitData(),
      validateName: '获取验证码',
      countDown: 60,
    };
  },
  activated() {
    console.log('this.$route: ', this.$route)
    localStorage.setItem('cid', this.$route.query.cid)
    localStorage.setItem('tid', this.$route.query.tid)
    this.getAreaTree()
  },

  methods: {
    // 获取所有城市树
    getAreaTree() {
      getAreaTree().then(res => {
        console.log('获取所有城市树: ', res)
        if (res.success) {
          let areaTree = this.getTree(res.data)
          localStorage.setItem('areaTree', JSON.stringify(areaTree))
        }
      })
    },

    getTree(arr) {
      for (var i in arr) {
        arr[i].text = arr[i].label;
        if (arr[i].levelID == 4) {
          delete arr[i].children
        }
        if (arr[i].children) {
          this.getTree(arr[i].children);
        }
      }
      return arr
    },

    // 获取验证码
    getSmsCode() {
      getSmsCode({Phone: this.formData.phone, CompanyId: this.$route.query.cid}).then(resp => {
        if (!resp.code && resp.success) {
          Dialog({ message: '验证码已发送' })
          console.log('%c 获取验证码 resp: ', 'color:red', resp)
          this.setTimeDown()
        } else {
          Dialog({ message: (resp && resp.message) || '错误！' })
        }
      })
      // getSmsCode({Phone: this.formData.phone, CompanyId: this.$route.query.cid}).then(
      //   (res) => {
      //     Dialog({ message: '验证码已发送' })
      //     console.log('%c 获取验证码: ', 'color:red', res)
      //     this.setTimeDown()
      //   },
      //   (err) => {
      //     // this.valuationData();
      //     // this.$refs.bankImg.reset();
      //   }
      // );
    },

    // 手机验证码定时器
    setTimeDown () {
      var that = this
      if (this.countDown === 0) {
        this.validateName = '重新获取'
        this.countDown = 60
      } else {
        this.validateName = this.countDown + 's'
        this.countDown--
        this.timer = setTimeout(() => {
          that.setTimeDown()
        }, 1000)
      }
    },

    // 提交
    onSubmit() {
      console.log('formData: ', this.formData);
      // this.$router.replace({path: 'personInfo'});
      var params = {
        BusinessType: 0,
        Phone: this.formData.phone,
        VerifyCode: this.formData.verifyCode,
        CompanyId: this.$route.query.cid,
      }
      smsLogin(params).then(resp => {
        console.log('%c 登录 resp: ', 'color:red', resp)
        if (!resp.code && resp.success) {
          Cookies.set('access_token', resp.data.access_token)
          localStorage.setItem('loginInfo', JSON.stringify(resp.data))
          this.$router.replace({path: 'personInfo', query: {cid: this.$route.query.cid, tid: this.$route.query.tid}});
        } else {
          Dialog({ message: (resp && resp.message) || '错误！' })
        }
      })
    },
  },
};
</script>

<style lang='stylus' scoped>
.idCard-wrap
  width 100%
  display flex
  font-size 0
  justify-content space-between
  .img-item
    width 49%
    img
      width 100%
.form-wrap
  .no-data
    text-align center
    line-height 90px
    color #aaa
    background rgb(248, 248, 248)
    border-radius 8px
  & .van-field
    padding 4.5px 0
    &::after
      display none
  & >>> .van-field__label
    width 4em
    text-align right
    color #99ACBF
    font-size 15px
    display inline-flex
    line-height 1.1em
    align-items center
    flex-direction row-reverse
    height 36px
  & >>> .van-field__body
    height 36px
    background #F4F7F8
    border-radius 5px
    padding 0 5px
    box-sizing border-box
  .button-wrap
    display flex
    justify-content center
    margin 25px 0
    cursor pointer
    .prev-step
      height 42px
      line-height 42px
      background #0DC2FF
      padding 0 33px
      box-shadow 0px 5px 5px 0px rgba(13, 194, 255, 0.35)
      text-align center
      border-radius 999px
      color white
      margin-right 20px
      font-size 14px
    & >>> .van-button
      display inline-flex
      width auto
      height 42px
      padding 0
      background #0DC2FF
      box-shadow 0px 5px 5px 0px rgba(13, 194, 255, 0.35)
      border none
    & >>> .van-button__content
      display inline-flex
      padding 0 33px
</style>